iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

不只是寫寫CSS,切版概念30天系列 第 20

DAY20 - 管理你的切版元件 - 製作UI統整頁(2)

  • 分享至 

  • xImage
  •  

製作一個UI統整頁要怎麼開始呢?
其實簡單來說,就是把你所有的切版元件放在同一個頁面,那要怎麼做呢?
來看一下UI統整頁的大概樣貌吧:

簡單一點,可以是這樣:把所有切版元件丟在一起:

https://ithelp.ithome.com.tw/upload/images/20201005/20130079gTRAqwUHIw.png

舒服清楚一點,可以是這樣,有分類讓你可以快速找到你的元件:

https://ithelp.ithome.com.tw/upload/images/20201005/20130079VJSvmV4snb.png

我自己習慣會有這幾個頁面:

  1. Layout頁連結 (可以連去新的頁面看到不同的Layout)
  2. 元件頁 會區分 一般元件(非表單)跟表單元件
    (會這樣分,是因為表單很常是自己有許多不同的規則很多可變化,也許之後某天可以來說說表單)

https://ithelp.ithome.com.tw/upload/images/20201005/20130079bzauUH7SPe.png

記得,UI統整頁不一定要做得多美麗,重點是它的功用!

UI統整頁,讓製作這個專案的人,可以快速知道整個專案的UI元件有多少


上一篇
DAY19 - 管理你的切版元件 - 製作UI統整頁(1)
下一篇
DAY21 - 切版結構分析 - 建立一個可Reuse的表單 Form - (1)
系列文
不只是寫寫CSS,切版概念30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言